<template>
  <el-card shadow="never" class="aui-card--fill">
    <!-- 方法分页dataShow   计算属性分页data（计算属性名） -->
    <el-table
      size="mini"
      border
      :data="dataShow"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column 
        prop="id" 
        label="公告编号" 
        
        align="center">
      </el-table-column>

      <el-table-column
        prop="type"
        label="公告类型"
        
        align="center"
        :formatter="noticeFormatter"
      >
      </el-table-column>

      <el-table-column
        prop="noticeTime"
        label="公告时间"
        
        align="center"
      >
      </el-table-column>

      <el-table-column
        prop="content"
        label="公告内容"
        width="1200"
        align="center"
      >
      </el-table-column>

      <el-table-column
        prop="managerId"
        label="物业负责人编号"
        
        align="center"
      >
      </el-table-column>

      <el-table-column label="操作" align="center" width="220px">
        <template slot-scope="scope">
          <el-button size="mini" @click="getContentById(scope.row.id)" icon="el-icon-search"
            >查看</el-button
          >
          <el-dialog
            title="查看公告内容"
            :visible.sync="contentDialog"
            width="600px"
          >
            <div>
              <span>{{ content }}</span>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="contentDialog = false">关闭</el-button>
            </div>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" align="center">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="pageSize"
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :total="total"
      >
      </el-pagination>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      content: "",
      //查看公告弹窗
      contentDialog: false,
      ownerId: 0,
      villageId: 0,
      noticeList: [],
      // 分页
      totalPageData: [], // 分页数据(全部数据已经分好页)
      pageNum: 1, // 共几页
      pageSize: 10, // 每页显示数量
      currentPage: 1, // 当前显示页码
      total: 1, // 总共多少条数据
      dataShow: [], // 当前页要显示的数据
    };
  },
  methods: {
    noticeFormatter(row) {
      var type = row.type;
      if (type == 0) {
        return "缴费公告";
      } else if (type == 1) {
        return "生活公告";
      } else if (type == 2) {
        return "安全公告";
      } else if (type == 3) {
        return "其他公告";
      }
    },
    //
    getContentById(id) {
      this.contentDialog = true;
      this.$http
        .get(`/eightapp/einoticeinfo/getContentById/` + id)
        .then(({ data: res }) => {
          this.content = res.data;
        });
    },
    //根据业主id获取小区id
    getVillageIdByOwnerId() {
      this.$http
        .get(`/eightapp/eiownerinfo/getVillageIdByOwnerId/` + this.ownerId)
        .then(({ data: res }) => {
          this.villageId = res.data;
          this.getNoticeByVillageId();
        });
    },
    //根据小区id获取公告
    getNoticeByVillageId() {
      this.$http
        .get(`/eightapp/einoticeinfo/getNoticeByVallageId/` + this.villageId)
        .then(({ data: res }) => {
          this.noticeList = res.data;
          this.total = res.data.length;
          this.Page();
        });
    },

    //分页
    Page() {
      // 计算页数，根据后台数据的条数和每页要显示的数量算出一共多少页，得0时设为1
      if (this.noticeList.length > 1) {
        this.pageNum = Math.ceil(this.noticeList.length / this.pageSize) || 1;
        // console.log("总页数：" + this.pageNum);
      }
      //数据分组
      for (let i = 0; i < this.pageNum; i++) {
        // 每页相当于一个数据，例如：[[],[],[]]
        // 根据每页显示数量，将后台的数据分割到每一页，假设pageSize为5，则第一也为1-5条slice(0,5),slice(5,10)...
        // slice()	选择数组的一部分，并返回新数组。
        // 起始索引：(当前页码-1)*每页显示的记录数    ，结束索引：当前页码*每页显示的记录数
        this.totalPageData[i] = this.noticeList.slice(
          this.pageSize * i,
          this.pageSize * (i + 1)
        );
      }
      // 获取到数据后显示第一页内容，数组下标是从0开始的，这里一定 要减去1，不然会丢失一组数据
      this.dataShow = this.totalPageData[this.currentPage - 1];
    },
    //修改每页显示数量
    handleSizeChange(val) {
      this.pageSize = val;
      // console.log("一页显示多少条：" + val);
      // 重新计算页数并分组
      this.Page();
    },
    //切换页面数
    handleCurrentChange(val) {
      this.currentPage = val;
      // 注意数组是从0开始，页码别忘了减去1
      this.dataShow = this.totalPageData[val - 1];
      // console.log("第几页： " + val)
    },
  },

  created() {
    this.ownerId = sessionStorage.getItem("OwnerId");
    this.getVillageIdByOwnerId();
  },
};
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
